<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>浮动清除 - 父级元素设置 overflow 样式</title>
    <style>
        /* 清除标签默认的内外边距 */
        * {
            padding: 0;
            margin: 0;
        }

        /* 清除列表默认样式 ( 主要是前面的点 ) */
        li {
            list-style: none;
        }

        /* 设置总体背景 */
        body {
            background-color: #f4f4f4;
        }

        /* 插入图片自适应 */
        img {
            width: 100%;
        }

        /* 下面是正式内容 */

        /* 清除浮动 - 使用 after 伪元素 ( 方法三 : 最流行写法 ) */
        /* .clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        } */

        /* 低版本浏览器 IE6 / IE7 清除浮动样式 */
        .clearfix {
            *zoom: 1;
        }

        .clearfix {
            *zoom: 1;
        }

        .clearfix:after {
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
            content: "";
        }

        /* 父容器 1 没有指定高度 , 默认 0 像素 */
        .father1 {
            width: 500px;
            background-color: pink;
            border: 2px solid green;

            /* 清除浮动 - 父级元素设置 overflow 样式 ( 方法二 ) */
            /* overflow: hidden; */
        }

        /* 子元素 1 */
        .son1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        /* 子元素 2 */
        .son2 {
            float: left;
            width: 250px;
            height: 250px;
            background-color: red;
        }

        /* 父容器 2 - 父容器 1 的兄弟元素 */
        .father2 {
            width: 700px;
            height: 150px;
            background-color: purple;
        }

        /* 清除浮动 - 额外标签法 ( 方法一 ) */
        /* .son3 {
			clear: both;
		} */
    </style>
</head>

<body>
    <div class="father1 clearfix">
        <!-- <div class="father1"> -->
        <!-- <div class="son1"></div>
        <div class="son2"></div> -->
        <!-- <br class="son3"> -->
    </div>

    <!-- <div class="father2"></div> -->

    <button id="btns">点击</button>

    <div>
        <div style="height: 6000px; border:1px solid black;"></div>
    </div>


</body>

<script type="text/javascript">
    // ========================================
    // 箭头函数中的this
    // var x = 11;
    // var obj = {
    //     x: 22,
    //     say: () => {
    //         console.log(this);
    //         console.log(this.x);
    //     }
    // }
    // obj.say()

    // this对象
    // var obj = {
    //     a: 10,
    //     b: function () {
    //         console.log(this.a); //10
    //     },
    //     c: function () {
    //         return () => {
    //             console.log(this);
    //             console.log(this.a); //10
    //         }
    //     },
    //     d: () => {
    //         console.log(this);
    //     }
    // }
    // obj.b()
    // obj.c()()
    // obj.d()

    // var obj1 = { aa: 1, b: 2, c: 3 }

    // for (let key in obj1) {
    //     console.log(key)
    // }

    // ========================================
    // 正则表达式
    // const str = 'qwbewrbbeqqbbbweebbbbqee';
    // const str = 'b';
    // console.log(str.match(/b{0}/g));

    // var name = 'asdf';
    // function lookName() {
    //     console.log(this);
    //     console.log(this.name);
    // }
    // lookName();

    // ========================================
    // 函数缓存
    // var data = [];
    // console.log("---------------");

    // for (var i = 0; i < 3; i++) {
    //     console.log('test', i);
    //     data[i] = function() {
    //         console.log('data', i);
    //     }
    //     console.log('ww', i);
    // }
    // data[0]();
    // data[1]();
    // data[2]();

    // ========================================
    // 浮点数
    // console.log(parseFloat(1.4000.toPrecision(3)) === 1.4);
    // 封装——展示
    function strip(num, precision = 3) {
        return parseFloat(num.toPrecision(precision));
    }
    // console.log(strip(1.40000) === 1.4);

    // ========================================
    // 运算
    // function add(num1, num2) {
    //     const num1Digits = (num1.toString().split('.')[1] || '').length;
    //     const num2Digits = (num2.toString().split('.')[1] || '').length;
    //     const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
    //     console.log(num1Digits, num2Digits);
    //     return (num1 * baseNum + num2 * baseNum) / baseNum;
    // }
    // console.log(add(1.4, 3.22));


    // ========================================
    // 防抖和节流
    // 防抖
    function debounce(func, wait) { // 在wait秒之后执行这个函数
        let timeout;
        return function () {
            let that = this; // 保存this指针
            let args = arguments;

            clearTimeout();
            timeout = setTimeout(() => {
                func.apply(that, args)
            }, wait);
            console.log(timeout);
        }
    }
    function sayHello(a, b) {
        console.log("Hello!");
    }

    // const btn = document.getElementsByClassName('btns')[0];
    var btn = document.getElementById('btns');
    btn.addEventListener("click", sayHello('a', 'b'));

    // debounce(sayHello, 1000);


    // 节流
    function throttled(fn, delay) {
        let timer = null;
        let startTime = Data.now();
        return function () {
            let curTime = Date.now();
            let remaining = delay - (curTime - startTime);
            let that = this;
            clearTimeout(timer);
            if (remaining <= 0) { // 已经过了delay秒
                fn.apply(that, args);
                startTime = Date.now();
            } else {
                timer = setTimeout(fn, remaining);
            }
        }
    }


    // ========================================
    // 判断一个元素的可视
    // function isInViewPortOfOne(el) {
    //     // viewPortHeight 兼容所有浏览器写法
    //     const viewPortHeight = window.innerHeight || document.documentElement.clientHeight
    //         || document.body.clientHeight
    //     const offsetTop = el.offsetTop
    //     const scrollTop = document.documentElement.scrollTop
    //     const top = offsetTop - scrollTop
    //     console.log(offsetTop, scrollTop, top, viewPortHeight);
    //     return top <= viewPortHeight
    // }
    // // console.log(isInViewPortOfOne(btn));
    // window.addEventListener('scroll', function() {
    //     console.log(isInViewPortOfOne(btn));
    // });

    // web常见攻击方式
    /**
     * 1. XSS 跨站脚本攻击
     *      涉及对象：攻击者、客户端、web应用
     *      攻击目标：盗取用户存储在客户端的身份信息
     *      分类：存储型、反射型、DOM型
     * 2. CSRF 跨站请求伪造
     *      
     * 3. SQL注入攻击
     * 
     * 
    **/

    // function fn() {
    //     var num = 0;
    //     return function () {
    //         console.log(this);
    //         console.log(++num);
    //     }
    // }

    // var fun = fn();
    // fun();
    // fun();


    var a = () => {
        return 1;
    }

    // 相当于
    function a() {
        return 1;
    }

    /**
     * @param {number[][]} matrix
     * @return {number[]}
     */
    // var spiralOrder = function (matrix) {
    //     const res = [];
    //     let up = 0, down = matrix.length, left = 0, right = matrix[0].length;
    //     while (left < right && up < down) {
    //         for (let j = left; j < right; j++) {
    //             res.push(matrix[up][j]); // 向右
    //         }
    //         up++;
    //         for (let i = up - 1; i < down; i++) {
    //             res.push(matrix[i][right]); // 向下
    //         }
    //         right--;
    //         for (let j = right + 1; j >= left; j--) {
    //             res.push(matrix[down][j]);
    //         }
    //         down++;
    //         for (let i = down - 1; i <= up; i--) {
    //             res.push(matrix[i][left]);
    //         }
    //         left++;
    //     }
    //     return res;

    // };

    // matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
    // var ans = spiralOrder(matrix);
    // console.log(ans);

    let cost = [3, 2, 4, 3, 5];

    let n = cost.length;
    let dp = [0, 0];
    let res = 0;
    for (let i = 2; i <= n; i++) {
        res = Math.min(dp[1] + Math.max(cost[i - 1], cost[i - 2]), dp[0] + Math.max(cost[i - 2], cost[i - 1]));
        dp[0] = dp[1];
        dp[1] = res;
    }
    console.log(res);


</script>

</html>